<template>
	<view class="container">
		<view class="header-box">
			<image v-if="payStatus==1 || payStatus == 2" class="header-img" :src="imageHost+'img_succeed_new.png'"></image>
			<image v-else class="header-img" :src="imageHost+'img_error.png'"></image>
			<view class="success-text">{{noticeText}}</view>
			<button class="success-button" open-type="launchApp" app-parameter="mall" @binderror="launchAppError">查看订单</button>
		</view>
		<!-- 底部菜单 -->
		<!-- <view class="bottom-box">
			<view class="">
				
			</view>
			
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogined: uni.getStorageSync("token"),
				mallOrderNo:'',
				imageHost: this.image_host + 'mall/',
				noticeText:'支付中', // 状态文字提示
				payStatus:1, // 支付状态 1 支付中 2 支付成功 3 支付失败
			}
		},
		onLoad(option) {
			if(!this.isLogined){
				this.login();
				return
			}
			this.mallOrderNo = option.mallOrderNo
			this.submitOrder()
		},
		methods: {
			 launchAppError (e) {
			     console.log(e)
			 },
			async login() {
			  try {
			    const code = await this.wxLogin();
			    const checkLoginRes = await this.$NoteApi.doRequest("get", "login", { code, requestCode: '' });
			    const { code: checkLoginCode, data, message } = checkLoginRes.data;
			    if (checkLoginCode == 0) {
			      uni.setStorageSync("userInfo", data);
			      uni.setStorageSync("token", data.token)
			      this.submitOrder()
			    } else {
			      uni.showToast({
			        title: message,
			        icon: 'none'
			      })
			    }
			  } catch (error) {
			    uni.showToast({
			        title: error,
			        icon: 'none'
			      })
			  }
			},
			wxLogin() {
			  return new Promise((resolve, reject) => {
			    uni.login({
			      provider: 'weixin',
			      success: (loginRes) => {
			        resolve(loginRes.code)
			      },
			      fail: (error) => {
			        reject(error)
			      }
			    })
			  })
			},
			// 提交数据
			submitOrder(){
				let that = this
				let postData = {
					"mallOrderNo": this.mallOrderNo,
				}
				that.$javaCircle.doRequest("post", "mall/pay/order", postData,'json').then(res => {
					if(res.data.code == 0){
						// 判断是不是 0元支付
						if(res.data.data.package){
							this.toPay(res.data.data)
						}else{
							uni.showToast({
								icon: 'success',
								title: '支付成功'
							})
							that.goSuccess(res.data.data)
						}
					}else{
						uni.showToast({title:res.data.message,icon:"none",duration:5000})
					}
				})
			},
			// 调起支付
			toPay(payConfig){
				let _this = this
				uni.requestPayment({
					provider: 'wxpay',    //支付类型-固定值
					timeStamp: payConfig.timeStamp, // 时间戳（单位：秒）
					nonceStr: payConfig.nonceStr, // 随机字符串
					package: payConfig.package, // 固定值
					signType: payConfig.signType, //固定值
					paySign: payConfig.paySign, //签名		
					success: function (res) {
						console.log('success:' + JSON.stringify(res));
						console.log("支付成功");
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						_this.noticeText = '支付成功'
						_this.payStatus = 2
					},		
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
						console.log(err);
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						})
						_this.noticeText = '支付失败'
						_this.payStatus = 3
					}
				});
			},
			
			// 跳转到订单成功页面
			goSuccess() {
				
			},
		}
	}
</script>

<style scoped lang="less">
	.container{
		background-color: #ffffff;
		width: 750rpx;
		min-height: 100vh;
	}
	.bottom-box{
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 0 50upx 0;
		z-index: 9;
	}
	.button-text{
		width: 686rpx;
		color: #ffffff;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 44rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}
	.back-button{
		width: 686rpx;
		color: #ffffff;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 44rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}
	.header-box{
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		color: #333333;
		padding: 30rpx;
		.header-img{
			width: 144rpx;
			height: 144rpx;
			margin: 50rpx 0 10rpx 0;
		}
		.success-text{
			padding-top: 10rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #5CAE77;
			line-height: 48rpx;
			letter-spacing: 1px;
			margin-bottom: 100rpx;
		}
		.success-button{
			width: 400rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			border: 2rpx solid #A4A4A4;
			font-size: 42rpx;
			color: #666666;
			text-align: center;
			margin: 30rpx 0 50rpx 0;
		}
	}
</style>
